<template>
  <!-- 咨询记录 -->
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-form label-width="auto" class="top">
        <el-row type="flex">
          <el-col :span="12" class="searchs-y">
            <el-form ref="searchFormRef" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                  <el-button slot="append" icon="el-icon-search" @click="handleChange" />
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- <el-col :span="2" :offset="14" class="buttons">
            <el-button type="primary" @click="addCustomer">+ 增加顾客</el-button>
          </el-col> -->
        </el-row>
        <el-row class="float-l">
          <!-- <el-col :span="14"> -->
          <Search
            :data="selections"
            :attribute="'createdTime'"
            @change="handleTypeChange"
            @dateChange="handleDateChange"
          />
          <!-- </el-col> -->
          <!-- <el-col :span="4"> -->
          <el-form-item>
            <dictionary-selector
              class="el-select-y"
              code="swan_front_jzlx"
              :value.sync="remedyType"
              placeholder="请选择分诊类型"
              @change="handle(remedyType, 1)"
            />
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="4" :offset="1"> -->
          <el-form-item>
            <el-select
              v-model="consultantValue"
              clearable
              class="el-select-y"
              placeholder="请选择咨询师"
              @change="handle(consultantValue, 2)"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.usrName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        <!-- </el-col> -->
        </el-row>
        <el-row class="mounteds">
          <!-- <Search :data="tabsName" :attribute="'createdTime'" @change="handleTypeChange" /> -->
          <Tabs v-model="returnToFile" :data="tabsName" @change="searchChange" />
        </el-row>
      </el-form>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table :data="list1" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="序号" type="index" width="60" :show-overflow-tooltip="true" />
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="customerSex" label="性别" :show-overflow-tooltip="true" />
        <el-table-column prop="remedyType" label="分诊类型" :show-overflow-tooltip="true" />
        <el-table-column prop="appeal" label="主需求" :show-overflow-tooltip="true" />
        <el-table-column prop="advisoryTime" label="咨询时间" :show-overflow-tooltip="true" />
        <el-table-column prop="result" label="咨询结果" :show-overflow-tooltip="true" />
        <el-table-column prop="drawSituation" label="开单情况" :show-overflow-tooltip="true" />
        <el-table-column prop="returnToFile" label="归档状态" :show-overflow-tooltip="true" />
        <el-table-column prop="consultantName" label="咨询师" :show-overflow-tooltip="true" />
        <el-table-column label="操作" width="290">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$refs.advisoryRecord.loadDetails(row, row.id)"
            >查看记录</el-button>
            <el-button
              v-if="row.returnToFile === '未归档'"
              type="text"
              size="small"
              @click="$refs.newAdd.advisory(row, row.triageId, row.id)"
            >继续咨询</el-button>
            <el-button
              v-if="row.returnToFile === '未归档'"
              type="text"
              size="small"
              @click="handleFile(row.id)"
            >归档</el-button>
            <el-button
              type="text"
              size="small"
              @click="Billing(row)"
            >开单</el-button>
            <el-button
              type="text"
              size="small"
              @click="seeRecharge(true, row.customerId)"
            >充值</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="total"
      />
    </div>

    <Record ref="advisoryRecord" :id-list="idList" />
    <Recharg
      :visible.sync="visible1"
      :ids="ids"
      @cancels="(visible1 = false), (ids = '')"
    />
    <Billing
      v-if="billing"
      ref="billing"
      :billing-data="billingData"
      :bill-type="'咨询开单'"
      @cancels="billing = false"
    />
    <NewAdd ref="newAdd" :modal-visible-data="modalVisibleData" />
  </div>
</template>
<script>
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import { DictionarySelector } from "@rabbit.do/rabbit";
import Search from "@/components/Search";
import Recharg from "./recharge.vue";
import Record from "./record.vue";
import { selections } from "@/config";
import Tabs from "@/components/SearchSelection";
import Billing from "../doctor/billing"; // 开单
import NewAdd from "../doctor/newAdd"; // 开单
import { tableColor, labelHeigh, lookup } from '@/utils/common.js';
export default {
  components: {
    Search,
    DictionarySelector,
    Record,
    Recharg,
    Tabs,
    Billing,
    NewAdd,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      idList: [], // 记录当前数据的id集合
      billingData: {},
      billing: false,
      modalVisible: false,
      custQuery: "",
      recordId: "",
      visible: false,
      visible1: false,
      returnToFile: "未归档",
      url: "",
      selections,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      remedyType: "",
      list1: [],
      input3: "",
      modalVisibleData: {},
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "未归档", name: "未归档" },
        { id: "已归档", name: "已归档" },
      ],
      search: {
        returnToFile: "未归档",
        timeType: "today",
        result: '成交,不成交',
        createdTime:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 00:00:00" +
          "_" +
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 23:59:59",
      },
      values: 1, // 控制表格是待咨询还是已咨询的
      options: [],
      consultantValue: "",
      ids: "",
    };
  },
  created() {
    if (this.$route.query.isPopup) {
      this.seeRecharge(true);
      this.$router.push({
        query: {},
      });
    }
  },
  mounted() {
    this.getList();
    // this.attributionConsultant();
    this.options = lookup("咨询师");
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async handleFile(id) { // 归档
      const confirmResult = await this.$confirm('请确认是否归档?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消归档');
      } else {
        this.$api['doctor/consulting/fileAdvisory']({ id }).then((res) => {
          if (res.code !== 200) return;
          return this.$message.success('已归档成功');
        }).finally(() => {
          this.getList();
        });
      }
    },
    eliminate() {
      this.custQuery = "";
      this.search = {
        result: '成交,不成交',
      };
      this.queryParams.page = 1;
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    async attributionConsultant() {
      // 获取咨询师下拉框的数据
      const res = await this.$api["data/hospitalStaff/getAllByJobName"]({
        hospitalJobName: "咨询师",
      });
      if (res.code !== 200) return;
      this.options = [];
      res.data.forEach((item) => {
        this.options.push({ value: item.id, label: item.usrName });
      });
    },
    Billing(val) {
      // 点击开单跳转
      this.billingData = {
        customerId: val.customerId,
        customerName: val.customerName,
        orderPaymentStyle: "全款",
        customerPhone: val.customerPhone,
        customerCode: val.customerCode,
        // sex: val.customerSex,
        advisoryName: val.consultantName,
        advisoryId: val.customerId,
        triageId: val.triageId,
        receiveId: val.receiveId,
        receiveName: val.receiveName,
      };
      this.billing = true;
      this.$nextTick(() => {
        this.$refs.billing.init();
      });
    },
    handle(val, number) {
      if (number === 1) {
        val
          ? this.$set(this.search, "remedyType", val)
          : this.$set(this.search, "remedyType", "");
      } else {
        val
          ? this.$set(this.search, "remedyType", val)
          : this.$set(this.search, "remedyType", "");
      }
      // Object.assign(this.search, val);
      this.getList();
    },
    seeDetails(bool, id) {
      if (id) {
        this.recordId = id;
      }
      this.visible = bool;
    },
    async seeRecharge(bool, id) {
      this.visible1 = bool;
      if (id) {
        // 点击充值
        this.ids = id;
      }
    },
    clearNoNum(obj) {
      this.input3 = this.input3.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.input3 = this.input3.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.input3 = this.input3.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.input3 = this.input3
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.input3 = this.input3.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
    },
    addCustomer() {
      this.$router.push({
        path: "/swan/customer/customers",
        query: {
          isPopup: true,
        },
      });
    },
    getList() {
      this.fetchList1("doctor/consulting/listed");
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    fetchList1(url) {
      // 请求列表的数据
      this.$api[url]({
        ...this.queryParams,
        query: this.search,
        custQuery: this.custQuery,
      }).then((res) => {
        if (res.code !== 200) return;
        this.idList = [];
        this.list1 = res.data.result;
        this.total = res.data.total;
        this.list1.forEach((item) => {
          this.idList.push({ id: item.id, customerId: item.customerId });
        });
      });
    },
    searchChange(e) {
      // Tabs切换的方法函数
      Object.assign(this.search, { returnToFile: e === "全部" ? "" : e });
      this.getList();
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  color: #707070;
}
// .el-table {
//   margin: 0 0 60px;
// }
.el-button {
  color: rgb(114, 222, 236);
}
.numberOrder {
  color: #a7a7a7;
  margin-top: 20px;
  font-size: 14px;
  span {
    color: #51abab;
  }
}
.top {
  > div {
    margin-right: 10px;
  }
  .mounteds {
    margin: 0px 0 10px;
  }
}
.spn {
  float: right;
  .inputCss {
    width: 248px;
  }
}
</style>
